<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <blockquote class="layui-elem-quote">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色：</label>
                    <div class="layui-input-block" id="roleDiv">

                    </div>
                </div>
            </form>
        </blockquote>
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>

    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"> 新 增
                </button>
            </div>
        </div>
    </form>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--头部工具栏-->
<script type="text/html" id="headertoolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-warm" lay-event="addRole">保存权限</button>
    </div>
</script>

<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable', 'layer', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var layer = layui.layer;
        var form = layui.form;

        $.ajax({
            url: "http://192.168.100.222:8082/user/checking.do",
            type: "post",
            dataType: "json",
            success: function (rec) {
                if (rec.code !== 0) {
                    layer.msg("非管理员无权访问查询页面,请联系管理员", {icon: 5, time: 1500}, function () {
                        window.location.href = "/html/welcome.html?t=1";
                    })
                } else {
                    init();
                }
            }
        });

        function init() {


            //获取角色列表
            $.ajax({
                url: "http://192.168.100.222:8082/role/findAllRole.do",
                type: "post",
                dataType: "json",
                data: {page: -1, limit: -1},
                async: false,
                xhrFields: {
                    // 发送 AJAX 请求时带上 cookie
                    withCredentials: true
                },
                success: function (rec) {

                    if (rec.code == 0) {
                        var roles = rec.data;
                        var str = "";
                        for (var i in roles) {
                            var role = roles[i];
                            if (role.id == 1) {
                                str += "<input type='radio' lay-filter='rolefilter' name='roleId' value='" + role.id + "' title='" + role.roleName + "' checked='checked'>"
                            } else {
                                str += "<input type='radio' lay-filter='rolefilter' name='roleId' value='" + role.id + "' title='" + role.roleName + "'>"
                            }
                        }
                        $("#roleDiv").html(str);
                        //重新刷新表单
                        form.render();
                        //显示默认被选中的角色应的权限(判断哪个radio被选中)
                        var roleId = 1;
                        loadTable(roleId);
                    } else {
                        layer.msg(rec.msg, function () {
                            parent.window.location.href = "/html/index.html"
                        })
                    }
                },
                error: function () {
                    layer.msg("error")
                }
            });

            //选中角色时,显示相应权限
            //监听单选框
            form.on('radio(rolefilter)', function (data) {
                var roleId = data.value;
                loadTable(roleId);
            });

            function loadTable(roleId) {
                // 渲染表格
                layer.load(2);
                let menunTable = treetable.render({
                    treeColIndex: 1,
                    treeSpid: -1,
                    treeIdName: 'authorityId',
                    treePidName: 'parentId',
                    elem: '#munu-table',
                    url: 'http://192.168.100.222:8082/meuns/findAll.do',
                    where: {'roleId': roleId},
                    page: false,
                    toolbar: '#headertoolbar',//开启头部工具栏
                    cols: [[
                        {type: 'checkbox'},
                        {
                            field: 'authorityName', minWidth: 200, title: '权限名称'
                        },
                        {field: 'authority', title: '权限标识'},
                        {field: 'menuUrl', title: '菜单url'},
                        {field: 'id', align: 'center', title: '排序号'},
                        {
                            field: 'orderNumber', width: 80, align: 'center', templet: function (d) {
                                if (d.parentId === 1) {
                                    return '<span class="layui-badge layui-bg-gray">按钮</span>';
                                }
                                if (d.parentId === -1) {
                                    return '<span class="layui-badge layui-bg-blue">目录</span>';
                                } else {
                                    return '<span class="layui-badge-rim">菜单</span>';
                                }
                            }, title: '类型'
                        },
                        {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });
            }


            //头工具栏事件
            table.on('toolbar(munu-table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'addRole':
                        var data = checkStatus.data;
                        //权限的id集合,角色的id
                        var roleId = $("input[type='radio']:checked").val();
                        var str = "roleId=" + roleId;
                        for (var i in data) {
                            var funcId = data[i].id;
                            str += "&funcId=" + funcId;
                        }
                        $.ajax({
                            url: "http://192.168.100.222:8082/meuns/modify.do",
                            type: "post",
                            data: str,
                            dataType: "json",
                            async: false,
                            xhrFields: {
                                // 发送 AJAX 请求时带上 cookie
                                withCredentials: true
                            },
                            success: function (rec) {
                                layer.msg(rec.msg);
                            }
                        });
                        break;
                }
            });

            //添加权限
            form.on('submit(data-search-btn)', function () {
                layer.open({
                    type: 2,
                    title: "添加权限",
                    skin: 'demo-class',
                    area: ['600px', '800px'],
                    content: ['/html/background/addFunc.html', 'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'],
                    end: function () {
                        window.location.reload();

                    }
                });
                return false;
            });


            $('#btn-expand').click(function () {
                treetable.expandAll('#munu-table');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#munu-table');
            });

            //监听工具条
            table.on('tool(munu-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                if (layEvent === 'del') {
                    layer.confirm("确定删除权限吗?", {icon: 3}, function () {
                        $.ajax({
                            url: 'http://192.168.100.222:8082/role/delFunc.do',
                            type: "post",
                            data: {id: data.id},
                            dataType: "json",
                            success: function (rec) {
                                if (rec.code === 0) {
                                    layer.msg("删除成功", {icon: 6, time: 1500}, function () {
                                        obj.del();
                                    })
                                } else {
                                    layer.msg("删除失败", {icon: 5})
                                }
                            }
                        });
                    });
                } else if (layEvent === 'edit') {
                    layer.msg('修改' + data.id);
                    layer.open({
                        type: 2,
                        title: "修改权限",
                        skin: 'demo-class',
                        area: ['600px', '800px'],
                        content: ['/html/background/updateFunc.html', 'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'],
                        success: function (layero, index) {
                            var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                            iframe.child(data)//向此iframe层方法 传递参数
                        },
                        end: function () {
                            window.location.reload();
                        }
                    });
                }
            });
        }
    });
</script>
</body>
</html>